<template>
  <div class="container">
    <div class="title">我们已经发送了验证码到您手机</div>
    <div class="tel">{{phone_format}}</div>
    <div class="number">
      <span>验证码</span>
      <input type="text" name="name" placeholder="请输入验证码" v-model="code">
    </div>
    <div :class="{tip:true,blue:!valid}" @click="returnSend">{{valid ?'接收短信大约需要'+overTime+'秒钟' : '刚刚验证码已经过期，点击此处重新发送'}}</div>
    <div class="commit" @click="commit">
      <div>完成</div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      phone:"",
      phone_format:"",
      overTime:60,
      overInterval:"",
      code:"",
      valid:true
    }
  },

  components: {
  },

  methods: {
    async commit(){
      let res=await this.$axios.post('/auth/retrievePassword',{phone:this.phone,verify_code:this.code});
      // console.log(res.data.data)
      if(res.data.level=='success'){
        // this.$currency.navigateTo(`/pages/memberCenter/rebuild/main?key=${res.data.data}`)
        this.$router.push({name:'rebuild',params:{key:res.data.data}})
      }
    },
    async returnSend(){
      if(this.valid==false){ 
        this.valid=true
        this.countdown()
        let res=await this.$axios.post('/auth/sendVerificationCode',{phone:this.phone})
        if(res.data.level!="success"){
          this.$currency.showToast(res.data.message,3000,'fail')
        }
      }
    },
    countdown(){
      this.overInterval=setInterval(()=>{
      this.overTime--;
      if(this.overTime<=0){
        this.overTime=60;
        this.valid=false
        clearInterval(this.overInterval)
      }
     },1000)
    }
  },

  activated(){
    this.phone=this.$route.params.phone
    this.phone_format=this.$route.params.phone.substr(0,3)+"****"+this.$route.params.phone.substr(7);
    this.countdown()
  }
}
</script>

<style scoped>
.title{width: 100%;line-height: 24px;font-size: 17px;color: #8E8E93;text-align:center;}
.tel{width: 100%;line-height: 31px;font-size: 22px;color: #000000;text-align:center;margin-top: 5px;}
.number{width: 100%;height: 20px;display: flex;justify-content: row;padding: 20px 0px;}
.number span{width: 100px;font-size: 17px;color: #000000;letter-spacing: 10px;padding-left: 25px;}
.number input{width: 265px;border: 0px;font-size: 16px;}
.tip{width: 100%;line-height: 24px;font-size: 17px;color: #000000;text-align:center;margin-top: 15px;}

.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #fff;font-size: 19px;}
.blue{color: red}
</style>
